<template>
  <div class="mb-wrap">
    <func-tree
      @select="handleSelect"
      class="app-cate-menu"
    />
    <func-list
      :current-data="currentData"
    />
  </div>
</template>

<script setup>
import { ref, watch, onMounted } from 'vue';
import FuncTree from './func-tree.vue';
import FuncList from './func-list.vue';

const props = defineProps({
  appId: Number
});

const loading = ref(false);
const currentData = ref({});
const actionType = ref('view'); // createGroup | createMenu | edit | view

const handleSelect = (data) => {
  currentData.value = data;
};

onMounted(() => {
  // 初始化逻辑可以在这里添加
});

watch(() => props.appId, () => {
  // 当 appId 变化时的逻辑可以在这里添加
});
</script>

<style lang="scss" scoped>
.mb-wrap {

  .mb-info {
    .info {
      padding-top: 10px;
      .service-form {
        flex: 1;
      }
      .service-marks {
        width: 500px;
        margin: 0 20px;
      }
    }
  }
}
.menu-custom-tree-node {
  width: 100%;
  position: relative;

  .menu-custom-icon {
    border-radius: 3px;
    background: #FEFEFE;
    color: #666;
    box-shadow: 0 0 1px #ddd;

    i {
      font-size: 14px;
    }
  }
}
</style>
